<template>
  <div class="container">
    <el-dialog
        title="预览"
        :visible.sync="visible"
        fullscreen
        @closed="$emit('closePreview');"
    >
      <span>在线报告审核预览</span>
      <pdf
          style="border: 1px solid #000; width: 60%; margin: 0 auto;"
          v-for="item in pdfPageTotal"
          :key="item"
          :page="item"
          :src="pdfUrl"></pdf>
    </el-dialog>
    <el-button @click="closePreview">关闭</el-button>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default({
  props: {
    id: {
      type: Number,
      default: 0  
    }
  },
  components: {pdf},
  data() {
    return {
      visible: true,
      pdfUrl: './output.pdf',
      pdfPageTotal: 0,
      // id: ''
    }
  },
  mounted() {
    // console.log(this.$route.query.id)
    // this.id = this.$route.query.id
    this.loadPdf()
  },
  methods: {
    closePreview() {
      this.$emit('closePreview');
    },
    loadPdf() {
      console.log(this.id);
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl(`/reportapproval/keyinstrument/viewPdf/${this.id}`),
          method: 'GET',
          params: this.$http.adornParams()
        }).then((data) => {
          this.pdfUrl = data;
          const pdfTask = pdf.createLoadingTask(this.pdfUrl);
          pdfTask.promise.then(pdf => this.pdfPageTotal = pdf.numPages).catch(error => {
            console.log(error)
          });
        }).catch((error) =>{
          console.log(error)
        })
        // this.$http.adornUrl(``).then(res => {
        //   if (res.code === 0) {
        //     this.pdfUrl = res.path;
        //     const pdfTask = pdf.createLoadingTask(this.pdfUrl);
        //     pdfTask.promise.then(pdf => this.pdfPageTotal = pdf.numPages).catch(error => {
        //       console.log(error)
        //     });
        //   }
        // })
      })
    }
  }
})
</script>


<style scoped>
.container {
  margin: 50px;
}
</style>
